<template>
  <el-drawer
    v-if="visible"
    class="appealDetail"
    :visible.sync="visible"
    :with-header="false"
    :append-to-body="true"
    size="85%"
  >
    <div class="title">
      <div class="title-text">入库单号 {{ detail.invenBillCode }}</div>
      <el-tag class="tag">{{
        formatColumnMap(billStatusMap, 'value', detail.billStatus, 'desc')
      }}</el-tag>
    </div>

    <!-- 左右布局 -->
    <div class="center">
      <!-- 左侧 -->
      <div class="left">
        <div class="client-box">
          <div class="title">入库信息</div>
          <div class="client-table">
            <div class="table-one-row">
              <div class="client-name">还瓶人</div>
              <div class="client-value">{{ detail.operator }}</div>
              <div class="client-name">所属机构</div>
              <div class="client-value">
                <span class="csmCode">{{ detail.orgName }}</span>
              </div>
            </div>
            <div class="table-one-row">
              <div class="client-name">还瓶数量</div>
              <div class="client-value">{{ detail.count1 }}</div>
              <div class="client-name">还瓶时间</div>
              <div class="client-value"> {{ detail.operatorTime
                ? parseTime(detail.operatorTime, "{y}-{m}-{d} {h}:{i}")
                : "" }}</div>
            </div>
            <div class="table-one-row">
              <div class="client-name">审核人</div>
              <div class="client-value">{{ detail.auditor }}</div>
              <div class="client-name">审核时间</div>
              <div class="client-value"> {{ detail.auditTime
                ? parseTime(detail.auditTime, "{y}-{m}-{d} {h}:{i}")
                : "" }}</div>
            </div>
          </div>
        </div>
        <div class="commodity-box">
          <div class="title">金额总计</div>
          <el-table
            class="detail-table"
            border
            :data="orderAmountList"
            :highlight-current-row="false"
            style="width: 100%;"
          >
            <el-table-column v-for="(item,index) in orderAmountData" :key="index" :label="index" align="center">
              <template slot-scope="">
                <div>{{ orderAmountData[index] }}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="commodity-box">
          <div class="title">入库明细</div>

          <el-table
            class="detail-table"
            :data="detail.detailList"
            border
            :highlight-current-row="false"
            style="width: 100%;"
          >
            <el-table-column prop="specName" label="型号" align="center">
              <template slot-scope="scope">
                <div>{{ scope.row.specName }}*{{ scope.row.gdCount }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="orderCode" label="订单号" align="center">
              <template slot-scope="scope">
                <div class="linkCode" @click="showOrderDetail(scope.row.orderCode)">{{ scope.row.orderCode }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="orderStatus" label="订单状态" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.returnType===1">正常</span>
                <span v-if="scope.row.returnType===2 || scope.row.returnType===13" style="color: #F56C6C;">虚拟</span>
                <span v-if="scope.row.returnType!==1&&scope.row.returnType!==2&&scope.row.returnType!==13">已退单</span>
              </template>
            </el-table-column>
            <el-table-column prop="returnType" label="还瓶类型" align="center">
              <template slot-scope="scope">
                {{ scope.row.returnType === 1 ? '空瓶' : '重瓶' }}
              </template>
            </el-table-column>
            <el-table-column prop="realCount" label="实际还瓶" align="center" />
            <el-table-column prop="recChipIDS" label="空瓶号" align="center">
              <template slot-scope="scope">
                <div v-if="!scope.row.recChipIDS">-</div>
                <div v-else>
                  <div v-if="scope.row.recChipIDS.indexOf(',') === -1" :class="{'linkCode':scope.row.recChipIDS}" @click="showBottleDetail(scope.row.recChipIDS)">{{ scope.row.recChipIDS }}</div>
                  <div v-else>
                    <div v-for="(item, index) in scope.row.recChipIDS.split(',')" :key="index" class="linkCode" @click="showBottleDetail(item)">{{ item }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="newChipIDS" label="重瓶号" align="center">
              <template slot-scope="scope">
                <div v-if="!scope.row.newChipIDS">-</div>
                <div v-else>
                  <div v-if="scope.row.newChipIDS.indexOf(',') === -1" :class="{'linkCode':scope.row.newChipIDS}" @click="showBottleDetail(scope.row.newChipIDS)">{{ scope.row.newChipIDS }}</div>
                  <div v-else>
                    <div v-for="(item, index) in scope.row.newChipIDS.split(',')" :key="index" class="linkCode" @click="showBottleDetail(item)">{{ item }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="detail.excepList&&detail.excepList.length>0" class="commodity-box">
          <div class="title">异常记录</div>

          <el-table
            class="detail-table"
            :data="detail.excepList"
            border
            :highlight-current-row="false"
            style="width: 100%;"
          >
            <el-table-column prop="specName" label="型号" align="center" />
            <el-table-column prop="orderCode" label="订单号" align="center">
              <template slot-scope="scope">
                <div class="linkCode" @click="showOrderDetail(scope.row.orderCode)">{{ scope.row.orderCode }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="returnStatus" label="类型" align="center">
              <template slot-scope="scope">
                {{ formatColumnMap(returnStatusList, 'value', scope.row.returnStatus, 'label') }}
              </template>
            </el-table-column>
            <el-table-column prop="gCount" label="数量" align="center" />
            <el-table-column prop="excepText" label="原因" align="center" />
          </el-table>
        </div>
        <div class="client-box">
          <div class="title">入库瓶号</div>
          <table class="client-tabel">
            <tr>
              <td>入库瓶号</td>
              <td class="linkCode"> <span v-for="(item,index) in bottleInfo.bottleCode" :key="index" :class="item.bottleReturnTag===1?'linkCode-red':''" @click="showBottleDetail(item.bottleCode)">{{ item.bottleCode }}{{ index!=(bottleInfo.bottleCode.length-1)?';':'' }}</span></td>
            </tr>
            <tr>
              <td>异常未扫入</td>
              <td class="linkCode linkCode-red"> <span v-for="(item,index) in bottleInfo.notScanList" :key="index" @click="showBottleDetail(item)">{{ item }}{{ index!=(bottleInfo.bottleCode.length-1)?';':'' }}</span></td>
            </tr>
          </table>
          <!-- <div class="client-table">
            <div class="table-two-row tooLong">
              <div class="client-name">入库瓶号</div>
              <div class="client-value linkCode">
                <span v-for="(item,index) in bottleInfo.bottleCode" :key="index" :class="item.bottleReturnTag===1?'linkCode-red':''" @click="showBottleDetail(item.bottleCode)">{{ item.bottleCode }}{{ index!=(bottleInfo.bottleCode.length-1)?';':'' }}</span>
              </div>
            </div>
            <div class="table-two-row tooLong">
              <div class="client-name">异常未扫入</div>
              <div class="client-value linkCode linkCode-red">
                <span v-for="(item,index) in bottleInfo.notScanList" :key="index" @click="showBottleDetail(item)">{{ item }}{{ index!=(bottleInfo.bottleCode.length-1)?';':'' }}</span>
              </div>
            </div>
          </div> -->
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <div class="timeline-title">入库单流转信息-{{ detail.invenBillCode }}</div>
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in flowInfoData"
            :key="index"
            :timestamp="
              `${parseTime(item.traceTime, '{y}-{m}-{d} {h}:{i}')} ${
                item.contacter
              }  ${item.timeGap || ''}`
            "
            placement="top"
          >
            <el-card>
              <h4>{{ item.traceDesc }}</h4>
              <h4 v-if="item.marker">{{ `备注:${item.marker}` }}</h4>
              <p>
                {{
                  `发生部门&nbsp;——&nbsp;${
                    item.facilityName ? item.facilityName : "系统"
                  }`
                }}
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <!-- 底部 -->
    <div
      class="demo-drawer__footer"
      style="padding: 0 10px 10px 0; text-align: right;"
    >
      <div class="btn-group">
        <div class="btns">
          <el-button v-if="invenBill.billStatus === 1" v-show="$btnPermission([70102,3])" type="primary" @click="recovery(invenBill, '通过')"> 入库 </el-button>
          <el-button v-if="invenBill.billStatus === 1" v-show="$btnPermission([70102,2])" type="danger" @click="recovery(invenBill, '不通过')"> 驳回 </el-button>
        </div>
      </div>
    </div>
    <order-detail
      ref="orderDetail"
      :payment-method-map="paymentMethodMap"
      :pay-status-map="payStatusMap"
      :transactor-list="transactorList"
      :order-flag-map="orderFlagMap"
      :order-source-map="orderSourceMap"
      :order-status-map="orderStatusMap"
    />
    <recovery ref="recovery" @upDataTable="search" />
    <cylinderDetail ref="cylinderDetail" />
  </el-drawer>
</template>

<script>
  import { diffTime, formatColumnMap, parseTime } from '@/utils'
  import { queryTransactorList, queryMap, callarBottleTrace, queryReturnBottledetailV2, queryBottleNum, callorBottleOrderAmount } from '@/api'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import OrderDetail from '@/views/orderCenter/orderManage/components/OrderDetails'
  import recovery from './recovery.vue'
  import CylinderDetail from '@/views/components/cylinderDetail/index'
  export default {
    name: 'warehousingDetail',
    components: {
      OrderDetail,
      recovery,
      CylinderDetail
    },
    data() {
      return {
        visible: false,
        detail: {},
        flowInfoData: [],
        paymentMethodMap: [],
        payStatusMap: [],
        orderSourceMap: [],
        transactorList: [],
        orderStatusMap: [],
        orderFlagMap: [],
        paymenFilList: [],
        orderAmountData: {},
        orderAmountList: [],
        invenBill: {},
        bottleInfo: {
          bottleCode: []
        },
        returnStatusList: [
          {
            label: '少还-新租瓶',
            value: 1
          },
          {
            label: '多还',
            value: 2
          },
          {
            label: '少还-自有瓶',
            value: 3
          },
          {
            label: '少还-空重一体瓶',
            value: 4
          }
        ],
        billStatusMap: [
          {
            value: 1,
            desc: '待审核'
          },
          {
            value: 2,
            desc: '已审核'
          },
          {
            value: 3,
            desc: '已驳回'
          }
        ]
      }
    },
    created() {
      this.queryOptionsMap()
    },
    methods: {
      parseTime,
      formatColumnMap,
      async open(temp) {
        this.invenBill = temp
        return new Promise(resolve => {
          this.resolve = resolve
          this.getOrderAmount()
          this.getWarehousingDetail()
          this.getBottleInfo()
          this.getflowInfoData()
          this.visible = true
        })
      },
      async getBottleInfo() {
        const res = await queryBottleNum({
          invenBillCode: this.invenBill.invenBillCode,
          type: 2
        })
        this.bottleInfo = res.data || {}
      },
      async getWarehousingDetail() {
        const params = {
          invenBillCode: this.invenBill.invenBillCode
        }
        const res = await queryReturnBottledetailV2(params)
        this.detail = res.data || {}
      },
      async getflowInfoData() {
        const params = {
          invenBillCode: this.invenBill.invenBillCode,
          bottleCode: this.invenBill.bottleCode
        }
        const res = await callarBottleTrace(params)
        this.flowInfoData = res.data || []
        this.flowInfoData.forEach((item, index) => {
          if (index < (this.flowInfoData.length - 1)) {
            const end = this.flowInfoData[index].traceTime
            const start = this.flowInfoData[(index + 1)].traceTime
            this.flowInfoData[index].timeGap = `(距离上一次操作${diffTime(start, end)})`
          }
        })
      },
      // 金额总计
      async getOrderAmount() {
        const params = {
          billCode: this.invenBill.invenBillCode
        }
        const res = await callorBottleOrderAmount(params)
        this.orderAmountList = []
        this.orderAmountData = res.data || []
        this.orderAmountList.push(this.orderAmountData)
      },
      async showOrderDetail(orderCode) {
        const row = {
          orderCode
        }
        const orderDetail = document.getElementsByClassName('orderDetail')[0]
        if (!orderDetail) {
          await this.$refs.orderDetail.open(row, true)
        } else {
          this.$message.warning('该信息弹窗已存在，请关闭当前弹窗')
        }
      },
      // 查询枚举
      async queryOptionsMap() {
        const [res1, res2, res3, res4, res5, res6] = await Promise.all([
          mergeAsyncFunc(queryMap, { enumName: 'CalcType' }),
          mergeAsyncFunc(queryMap, { enumName: 'PaymentMethod' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderFlag' }),
          mergeAsyncFunc(queryMap, { enumName: 'PayStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderSource' })
        ])
        this.calcTypeList = res1.data // 收款方式
        // 过滤支付方式
        const arr = ['现金', '微信支付', '支付宝', '银行支付']
        res2.data.filter(item => {
          if (arr.includes(item.desc)) {
            this.paymenFilList.push(item)
          }
        })
        this.paymentMethodMap = res2.data.filter(
          item =>
            item.value === 1 ||
            item.value === 2 ||
            item.value === 16 ||
            item.value === 128 ||
            item.value === 256 ||
            item.value === 2048
        ) // 支付方式
        this.orderStatusMap = res3.data.filter(item => item.value !== 6) // 订单类型(去掉‘已转派’)
        this.orderFlagMap = res4.data // 订单类型
        this.payStatusMap = res5.data // 支付状态
        this.orderSourceMap = res6.data // 订单来源
        this.getTransactorList()
      },
      // 获取下单人列表
      async getTransactorList() {
        const res = await queryTransactorList({})
        this.transactorList = res.data
      },
      async recovery(row, type) {
        await this.$refs.recovery.open(row, type, 'return')
      },
      search() {
        this.visible = false
        this.resolve()
      },
      // 气瓶详情
      async showBottleDetail(val) {
        if (val) {
          await this.$refs.cylinderDetail.open(val)
        } else {
          this.$message.warning('暂无相关信息')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
/deep/.el-drawer__header {
  padding: 15px 20px;
  margin-bottom: 0;
}

.center {
  display: flex;
  height: calc(100vh - 120px);
  padding: 0 20px;
  overflow-y: auto;
  // height: 700px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: left;
  .left {
    position: relative;
    width: 75%;
    height: 100%;
    padding-right: 40px;
    .el-descriptions {
      margin-bottom: 20px;
    }
    .client-box {
      margin-top: 20px;
      .title {
        margin-bottom: 10px;
        font-weight: 600;
        color: #38bdbd;
      }
      .client-table {
        border: 1px solid #e3e3e3;
        .table-one-row {
          border-bottom: 1px solid #e3e3e3;
          div {
            display: inline-block;
          }
          .client-name {
            width: 16%;
            padding: 10px 0;
            text-align: center;
            background-color: #f1f1f1;
          }
          .client-value {
            width: 32%;
            padding: 10px 0;
            text-align: left;
          }
        }
        .table-two-row {
          border-bottom: 1px solid #e3e3e3;
          div {
            display: inline-block;
          }
          .client-name {
            width: 16%;
            padding: 10px 0;
            text-align: center;
            background-color: #f1f1f1;
          }
          .client-value {
            padding: 10px 0;
            text-align: left;
            flex: 1;
          }
        }
        .table-two-row:last-child {
          border-bottom: none;
        }
      }
    }
    .commodity-box {
      margin-top: 20px;
      .title {
        margin-bottom: 10px;
        font-weight: 600;
        color: #38bdbd;
      }
      .detail-table {
        /deep/.el-table__header tr {
          background: #f1f1f1;
          th {
            font-weight: 500;
            background: #f1f1f1;
          }
        }
        /deep/.el-table__body tr:hover {
          background: #fff;
          td:hover {
            background: #fff;
          }
        }
      }
    }
  }

  .right {
    height: 100%;
    padding-left: 15px;
    border-left: 1px solid #e3e3e3;
    flex: 1;
    .timeline-title {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      color: white;
      background-color: #38bdbd;
      border-radius: 5px;
    }
    .el-timeline {
      margin-top: 20px;
    }
  }
}
.demo-drawer__footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 55px;
  background: white;
  border: 2px solid #dcdfe6;
  .btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-right: 21%;
    .btns {
      display: flex;
      margin-left: 15px;
    }
  }
}
.title {
  display: flex;
  padding: 20px 20px 0 20px;
  // margin-bottom: 20px;
  .title-text {
    line-height: 25px;
  }
  .tag {
    margin: 0 10px;
  }
}
.label-child {
  position: absolute;
  top: 30px;
  right: 10px;
  width: 90px;
  height: 24px;
  font-size: 12px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  transform: rotate(50deg);
}
// .red {
//   background-color: #F56C6C;
//   border-color: red;
// }
// .green {
//   background-color: #38BDBD;
//   border-color: #1D7471;
// }
// .csmCode {
//   color: #38BDBD;
//   cursor: pointer;
// }
.linkCode {
  color: #38BDBD;
  word-break: break-all;
  cursor: pointer;
}
.linkCode-red {
  color: red;
}

.client-tabel {
  // width: 100%;
  border-top: 1px solid #e3e3e3;
  border-left: 1px solid #e3e3e3;
  border-spacing: 0;
  td {
    border-right: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
  }
  tr {
    td:nth-child(1) {
      min-width: 120px;
      padding: 10px 0;
      text-align: center;
      background-color: #f1f1f1;
    }
    td:nth-child(2) {
      width: 100%;
      padding: 8px;
      line-height: 20px;
    }
    .linkCode {
      color: #38BDBD;
      word-break: break-all;
      cursor: pointer;
    }
    .linkCode-red {
      color: red;
    }
  }
}
</style>
